//弹窗索引
let layerIndex = null
// 从layui中引入所需的参数
const laypage = layui.laypage
// 设置时间数据的处理
// 传入的参数是一个时间戳,即毫秒数
function ti(time) {
    // 获取对应的时间
    const date = new Date(time);
    const YYYY = date.getFullYear()
    const MM = i(date.getMonth() + 1)
    const DD = i(date.getDate())
    return `${YYYY}-${MM}-${DD}`
}
// 设置补0
const i = t => t >= 9 ? t : "0" + t

// 设置文章总数的变量
let count = null

// 设置一个请求数据对象
let data = {
    page: 1,
    limit: 10,
    start_time: '',
    end_time: '',
    title: '',
    cateid: '',
}

// 设置一个请求函数
getData(data)
function getData(data) {
    $.ajax({
        method: 'GET',
        url: '/ydd_article/list',
        headers: {
            'x-token': localStorage.getItem('token')
        },
        data: data,
        success: function (res) {
            // 获取文章的总数
            count = res.data.count
            // 设置文章状态的判断
            let stat = null
            const str = res.data.data.map((item, i) => {
                const { id, content, catename, pic, create_date, ishot, istop, status } = item
                // 对文章的状态进行判断
                if (status === 0) {
                    stat = '待审核'
                } else if (status === 2) {
                    stat = '已发布'
                } else if (status === 1) {
                    stat = '草稿箱'
                } else {
                    stat = '已删除'
                }
                return `
       <tr>
         <td>${id}</td>
         <td>${content}</td>
         <td>${catename}</td>
         <td><img src="http://124.223.14.236:8060/${pic}" alt=""></td>
         <td>${ti(create_date)}</td>
         <td><div id="Article">${ishot ? '推荐' : '不推荐'} </div></td>
         <td><div id="Article">${istop ? '置顶' : '不置顶'} </div></td>
         <td><div id="Article">${stat} </div></td>
         <td class="compile" >
           <ul>
             <a href="./wenzhangxiugai.html" data-id='${id}' class='XIU'><li><i class="layui-icon layui-icon-edit"></i></li></a>
             <li data-id='${id}' id='del'><i class="layui-icon layui-icon-delete"></i></li>
           </ul>
         </td>
       </tr>
       `
            }).join('')
            $('.layui-table tbody').html(str)
            laypageRender(count)
            // 设置修改文字的id存储
            $('.XIU').on('click', function () {
                localStorage.setItem('I_D', $(this).data('id'))
            })
        }
    })
}

// 设置分页器
function laypageRender(count) {
    laypage.render({
        elem: 'test12',//注意，这里的 test1 是 ID，不用加 # 号
        count: count, //数据总数，从服务端得到
        limit: data.limit,//设置每页文章的个数
        curr: data.page,//当前接口请求的是那一页
        // 设置自定义的配置
        layout: ['count', 'limit', 'prev', 'page', 'next'],
        limits: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],//注意点limits只有在设置layout属性的时候才会生效
        // 切换分页的回调
        jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            //console.log(obj.limit); //得到每页显示的条数
            // 修改传递参数当中的 pagenum 值
            data.page = obj.curr
            data.limit = obj.limit
            //首次不执行
            if (!first) {
                // 重新调用请求函数
                getData(data)
            }
        }
    });
}

// 设置重置按钮的请求
$("#resetting").on('click', function () {
    data = {
        page: 1,
        limit: 10,
        start_time: '',
        end_time: '',
        title: '',
        cateid: '',
    }
    // 再次请求函数
    getData()
})


// 设置搜索按钮
$('#search').on('click', function (e) {
    e.preventDefault()
    // 获取表单中的数据
    const arr = $('#form').serialize().split('&')
    arr.forEach(item => {
        data[item.split('=')[0]] = item.split('=')[1] ? item.split('=')[1] : ''
    })
    // 获取时间的参数
    const time = $('#test1').val().split(' - ')
    // 将获取到的数据转换为时间戳的形式
    data.start_time = +new Date(time[0]) ? +new Date(time[0]) : ''
    data.end_time = +new Date(time[1]) ? +new Date(time[1]) : ''
    getData(data)
})


// 设置文章的删除
$(".layui-table tbody").on('click', '#del', function () {
    const id = $(this).data('id')
    // 设置是否删测除的二次确认
    //确认删除弹框
    layer.confirm('确定删除吗,是否继续?', { title: ' ' },
        function (index) {
            //点击确认，删除接口
            $.ajax({
                url: '/ydd_article/del',
                method: 'GET',
                data: { id },
                headers: {
                    'x-token': localStorage.getItem('token')
                },
                success: function (res) {
                    getData()
                }
            })
            layer.open({
                anim: 1,
                skin: 'demo-class',
                shade: 0,
                offset: '10px',
                area: ['300px', '40px'],
                title: false,
                btn: false,
                time: 2000,
                closeBtn: 0,
                tipsMore: true,
                content: '<div class="true"><i class="layui-icon layui-icon-ok-circle"></i>删除成功</div>'
            });

            layer.close(index);
        },
        function () {
            layer.open({
                anim: 1,
                skin: 'democlass',
                shade: 0,
                offset: '10px',
                area: ['300px', '40px'],
                title: false,
                btn: false,
                time: 2000,
                closeBtn: 0,
                tipsMore: true,
                content: '<div class="false"><i class="layui-icon layui-icon-close-fill"></i>已取消</div>'
            });
        })

});


// --------------------

// 设置字体图标的移入与移出的效果
$("#close").hover(function () {
    $("#close_sousuo").stop().show()
}, function () {
    $("#close_sousuo").stop().hide()
})

$('#open').hover(function () {
    $(".open_sousuo").stop().show()
}, function () {
    $(".open_sousuo").stop().hide()
})
$('#shuaxin').hover(function () {
    $("#flushed").stop().show()
}, function () {
    $("#flushed").stop().hide()
})


// 设置右侧菜单的点击效果
$('#menu').on('click', function () {
    $("#set_up").stop().toggle()
    // 给菜单内容部的选项框设置时间
    const arr = document.querySelectorAll('[name=q]')
    arr.forEach((item, i) => {
        if (item.checked) {
            item.parentNode.style.color = '#5a9cf8'
        } else {
            item.parentNode.style.color = '#999999'
        }
    })

    // 设置input的点击事件
    $('[name=q]').on('click', function () {
        arr.forEach((item, i) => {
            if (item.checked) {
                item.parentNode.style.color = '#5a9cf8'
                document.querySelectorAll(".i .layui-table tbody tr").forEach(item => {
                    $(item).find("td").eq(i).show()
                })
                $('.i .layui-table thead tr th').eq(i).show()
            } else {
                document.querySelectorAll(".i .layui-table tbody tr").forEach(item => {
                    $(item).find("td").eq(i).hide()
                })
                $('.i .layui-table thead tr th').eq(i).hide()
                item.parentNode.style.color = '#999999'
            }
        })
    })
})






// 设置新增
$('#xinzeng').on('click', function () {
    localStorage.removeItem('I_D')
    location.href = './articleF.html'
})








//*---文件导出
let arrStr = [] //表格中的每一行
let newArr = [] //处理好的数据数组
$("#btnExports").on("click", function () {
    // "\t1\t首页Banner\t不是每次微笑都证明我很快乐\t\thttp://www.jd.com\t"
    $("#adTable  tr").each(function () { arrStr.push($(this)[0].innerText) })
    newArr = arrStr.map((v, i) => { return v.split(/\t/) })
    clickDownload()
})
function clickDownload() {
    let textTh = "ID,标题,分类名,图片,创建时间,是否推荐,是否置顶,文章状态\n"; //表格头
    // let textTr = "□,1,首页Banner,不是每次微笑都证明我很快乐,图片破损,	http://www.jd.com\n"
    let text = textTh // 最终表格数据
    newArr.forEach((v, i) => { text += v + "\n" })
    let downloadLink = document.createElement('a');
    downloadLink.href = 'data:attachment/csv;charset=utf-8,' + "\uFEFF" + encodeURIComponent(text);
    downloadLink.download = "文章管理信息.xlsx";
    downloadLink.click();
}